<template>
    <div class="ad-detail">
        <el-page-header @back="$router.back()" content="編輯廣告">
            
        </el-page-header>
        <div class="form-container">
            <el-form label-width="140px" v-if="formData">
                <template v-if='$route.adType == 1'>
                    <el-form-item label='廣告類型'>
                        <el-select v-model="formData.record_type" disabled class="width100">
                            <el-option label="我要購買" :value="1"></el-option>
                            <el-option label="我要出售" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='幣種'>
                        <el-select v-model="formData.coin_id" disabled class="width100">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.coin' 
                                :key='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="法幣">
                        <el-select v-model="formData.currency_id" class="width100">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.currency' 
                                :key='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label='担保币' >
                        <el-select v-model="formData.coin_id" disabled class="width100">
                            <el-option 
                                label="泰达币" 
                                :value="1" 
                                
                                ></el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label='目标法币'>
                        <el-select v-model="formData.currency_id" class="width100">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.currency' 
                                :key='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='提供法币'>
                        <el-select v-model="formData.cur_currency_id" class="width100" @change='curCurrencyChange'>
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.currency' 
                                :key='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <el-form-item label="展示國家">
                    <el-select v-model="formData.nation_id" class="width100">
                        <el-option 
                            :label="item.title" 
                            :value="item.id" 
                            v-for='item in $store.state.nation' 
                            :key='item.id'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='支付方式'>
                    <el-checkbox-group v-model="formData.pay_type" @change='checkPayType'>
                        <el-checkbox :label="item.id" v-for='item in $store.state.payment' :key='item.id'>
                            <div class="f-s">
                                <img :src="item.icon" alt="" style='width:15px; margin-right : 5px;'>
                                {{item.title}}
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否限制交易">
                    <el-radio-group v-model="formData.is_auth">
                        <el-radio :label="1">僅限實名認證可交易</el-radio>
                        <el-radio :label="0">全部</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if='$route.adType == 1'>
                    <el-form-item label="單價">
                        <el-input v-model="formData.price"  placeholder="請輸入單價">
                            <template slot="append">CNY</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label='最小交易金額'>
                        <el-input v-model="formData.min_money"  placeholder="請輸入最小交易金額">
                            <template slot="append">CNY</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label='最大交易金額'>
                        <el-input v-model="formData.max_money"  placeholder="請輸入最大交易金額">
                            <template slot="append">CNY</template>
                        </el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label='目标金额'>
                        <el-input v-model="formData.price" type='number' @change='targetNumberChange'></el-input>
                    </el-form-item>
                    <el-form-item label='兑换金额'>
                        <el-input v-model="formData.cur_price" disabled></el-input>
                    </el-form-item>
                </template>
                <el-form-item label='付款期限'>
                    <el-input v-model="formData.trade_limit"  placeholder="請輸入付款期限">
                        <template slot="append">分鐘</template>
                    </el-input>
                </el-form-item>
                <el-form-item label='交易條款'>
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        placeholder="請輸入交易条款"
                        v-model="formData.trade_content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="center" >
                <el-button type='primary' @click='updateAd'>保 存 編 輯</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import  {GetAdDetail, UpdateAd, GetRate} from '@/api/ad'
    export default {
        data () {
            return {
                formData : null,
                rate : 0
            }
        },
        mounted () {
            this.getAdDetail()
        },
        methods : {
            //获取广告详情
            getAdDetail() {
                GetAdDetail({
                    id : this.$route.params.id
                }).then(res => {
                    let data = res.result;
                    //处理支付方式
                    data.pay_type = data.pay_type.map(item => item.id)
                    this.formData = data;
                    console.log(this.formData)
                })
            },
            checkPayType () {
                if(this.formData.pay_type.length > 3) {
                    this.$alert('最多只能選擇3種支付方式', '提示', {
                        callback :() => {   
                            this.formData.pay_type = this.formData.pay_type.splice(0,3)
                        }
                    })
                }
            },
            targetNumberChange () {
                let numberReg = /^[0-9]+.?[0-9]*$/


                if (!numberReg.test(this.formData.price)) {
                    this.$alert('請輸入合法的單價', '提示')
                    return;
                }
                this.formData.cur_price = (this.formData.price / this.rate).toFixed(2)
            },
            curCurrencyChange () {
                if (this.formData.currency_id == this.formData.cur_currency_id) {
                    this.$alert('提供法币不可与目标法币一样', '提示', {
                        callback :() => {   
                            this.formData.cur_currency_id = null
                        }
                    })
                    return;
                }
                GetRate(this.formData).then(res => {
                    this.rate = res.result.rate;
                    this.formData.cur_price = (this.formData.price / this.rate).toFixed(2)
                })
            },
            updateAd () {
                if (!this.formData.cur_currency_id && this.formData.ad_type == 2) {
                    this.$alert('请选择提供法币', '提示')
                    return;
                }
                if (!this.formData.pay_type || !this.formData.pay_type.length) {
                     this.$alert('請至少選擇一種付款方式', '提示')
                    return;
                }
                 let numberReg = /^[0-9]+.?[0-9]*$/

                if (!this.formData.price) {
                    this.$alert('請輸入單價或金额', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.price)) {
                    this.$alert('請輸入合法的單價或金额', '提示')
                    return;
                }
                if (!this.formData.min_money && this.formData.ad_type == 1) {
                    this.$alert('請輸入最小交易金額', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.min_money) && this.formData.ad_type == 1) {
                    this.$alert('請輸入合法的最小交易金額', '提示')
                    return;
                }
                if (!this.formData.max_money && this.formData.ad_type == 1) {
                    this.$alert('請輸入最大交易金额', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.max_money) && this.formData.ad_type == 1) {
                    this.$alert('請輸入合法的最大交易金额', '提示')
                    return;
                }
                if (!this.formData.trade_limit) {
                    this.$alert('請輸入付款期限', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.trade_limit)) {
                    this.$alert('請輸入合法的付款期限', '提示')
                    return;
                }
                let params = JSON.parse(JSON.stringify(this.formData))
                params.pay_type = params.pay_type.join(',')

                UpdateAd(params)
                    .then(res => {
                        this.$alert('更新成功', '提示', {
                            callback : _ => {
                                this.$router.back()
                            }
                        })
                    })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');

    @media screen and (max-width : 670px) {}

    @media screen and (min-width : 670px) {
        .ad-detail {
            width: 1200px;
            margin : 15px auto;
            padding: 15px;
            background: #fff;
            .form-container {
                width: 600px;
                margin: 25px auto;
                // margin-top: 25px;
            }
        }
    }
</style>
